import React, { useState, useRef, useEffect } from 'react';

export default function SuperInput({ label, value, handleChange, state = true, autoComplete, multiline = false,className }) {
  const [inputValue, setInputValue] = useState(value || '');
  const inputRef = useRef(null);
  useEffect(() => {
    setInputValue(value || '');
  }, [value]);
  const onChange = () => {
    const newValue = inputRef.current.value;
    setInputValue(newValue);
    handleChange(newValue);
  };
  const baseClassNames = 'text-sm text-black px-3 py-2 border w-full border-gray-300 rounded-xs focus:outline-none';
  const enabledClass = 'border-grapy400 focus:border-gray-400 focus:ring-gray-400';
  const disabledClass = 'border-black cursor-not-allowed';
  const commonProps = { ref: inputRef, className: `${baseClassNames} ${state ? enabledClass : disabledClass}`, value: inputValue, onChange: onChange, autoComplete: autoComplete, disabled: !state, };
  return (
    <div className={`flex flex-col gap-0.5 w-1/2 my-4 ${className}`}>
      {label && <label className="form-label text-sm text-gray-600">{label}：</label>}
      {multiline ? ( <textarea {...commonProps} className={`${commonProps.className} resize-y min-h-[80px] whitespace-pre-wrap`} /> ) : ( <input type="text" {...commonProps} /> )}
    </div>
  );
}
